$fontall:14px/1.5 arial,"微软雅黑","Microsoft Yahei","Hiragino Sans GB",sans-seri;
article, aside, details, summary, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, s, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {border: 0 none;margin: 0;outline: 0 none;padding: 0;}
* {word-break: break-all;}
body, html {color:#444; font:$fontall; _background-image:url(about:blank); _background-attachment:fixed;/** 防止 ie6 抖动 **/}
input { margin: 0;padding: 0;vertical-align:middle;font:$fontall; outline:none;}
textarea{font:$fontall; outline:none;}
select{cursor: pointer; vertical-align: middle; font:$fontall; padding:0; margin:0; outline:none;}
option{ padding:0; margin:0; outline:none;}
li {list-style-type: none;}
img {text-align: center; vertical-align: middle;}
address, cite, dfn, em, var { font-style: normal;}
a { text-decoration: none; color:#444; cursor:pointer; transition: all 0.4s; -webkit-transition:all 0.4s; -moz-transition: all 0.4s;}
a:hover { text-decoration:none;}
a:active{ text-decoration:none;}
img{border:0px;}
.clear{ clear: both; padding: 0; margin: 0; line-height: 0;}

$mainColor:#609eff;

.posR{position: relative;}
.posA{ position: absolute;}
.posCenter{ left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.bgMain{ background: #F5F5F5;}
.boxShdow{ box-shadow: 0 1px 1px #efebeb;}
.pad10{padding: 10px;}

.listPage, .detailed{ @extend .posA, .posCenter, .bgMain; z-index: 100; overflow: hidden; overflow-y: auto;}
nav{
    background:#FFF; display: flex; display:-webkit-box; @extend .boxShdow;
    a{ 
        display: block; flex: 1; text-align: center; height: 40px; line-height: 40px; text-decoration: none;
        &.on{color: #1bb1fb; font-weight: bold; font-size: 1.1rem; border-bottom:2px solid #1bb1fb;}
    }
}
.topBts{
     display: flex; width: 100%;
     a{ 
         display: block; flex: 1; text-align: center; line-height: 3em; text-decoration:none;
        &.on{ color: #0084e4; font-weight: bold;}
        }
}

.List{
    min-height: 200px;
    ul{
        // @extend .posA;
        // left: 0; top:54px; right: 0; bottom: 0; margin: auto; overflow: hidden; overflow-y: auto;
        li{ 
            background: #FFF; margin:1px 0; padding: 10px;
            span{
                &.drop{
                    float:right; background: #F30; width: 40px; height: 40px; line-height: 55px; color:#FFF; border-radius:50px; display: block; text-align: center; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto 10px;
                    i{ font-size: 22px;}
                }
            }
            h3{ 
                text-align: justify; font-weight: normal; color: #333;
                
                span{ 
                    font-size:14px; padding: 5px 0 0;
                    i{ font-size: 20px; vertical-align:middle; margin:-3px 5px 0 0; float: left;}
                }
                .point{ padding: 0; width: 10px; height: 10px; margin: 7px 0 0; float: right; border-radius: 50%; overflow: hidden; background: #F30;}
                &.haveN{ 
                    position: relative; padding: 0 20px 0 0;
                    &::after{content:""; position: absolute; right: 0; top: 7px; display: block; width: 10px; height: 10px; border-radius: 50px; overflow: hidden; background: #F30;}
                }
            }
            p{ 
                padding: 5px 0 0; color: #999;
                span{ 
                    padding: 0 25px 0 0;
                    &.huiyi{ color: #F30;}
                }
                time{ float: right;}
            }
        }
    }
}
.noMessage{
    text-align: center; color: #dedede; padding:10em 0;
    dt{font-size:6em; letter-spacing:-3px; font-weight: bold; font-style: italic; height: 100px;}
    dd{ 
        font-size: 1.2em;
        span{ font-size: 1.4em;}
        p{  
            display: inline-block; padding: 10px; border-radius: 3px; margin: 20px 0 0;
        }
    }

}

//新建内容
.addForm{
    h2{ text-align: center; font-weight:normal; font-size: 16px; padding: 10px 0;}
    .addBox{
        padding: 10px 15px;
        em{ float: left; width:90px; }
        .rightCon{ 
            overflow: hidden;
            .peolist{ 
                margin: 0 0 5px;
                span{ display: inline-block; background: #bdddff; color:#2d5580; padding: 5px 15px; margin:0 5px 5px 0; border-radius: 3px;}
            }
            p{ background: #f5f5f5; text-align: center; padding: 5px 0; color: #999; font-size: 12px; margin: 0 0 10px;}
            .appendPeo{  
                background: #1bb1fb; height: 30px; line-height: 30px; padding: 0 8px; border-radius: 3px; display:inline-block; text-align: center; color: #FFF;
                i{color:#FFF; font-size: 16px; vertical-align: middle; margin: -2px 5px 0 0;}
            }
            .duanxin{
                margin: 0 0 0 5px;
                .van-switch{vertical-align: middle; margin: -2px 0 0 5px;}
            }
            .fileAdd{
                label{
                    &.upButton{ 
                        background: #1bb1fb; color: #FFF; border-radius: 3px; padding:5px 10px; position: relative; display:inline-block;
                        i{vertical-align: middle; margin: -2px 5px 0 0; font-size: 16px;}
                        input{ position: absolute; opacity: 0;}
                    }
                }
                .fileList{
                    li{ 
                        height:35px; line-height: 35px; border-bottom:1px solid #eaeaee;
                        span{ display: block; overflow: hidden; white-space:nowrap; text-overflow: ellipsis;}
                        button{ 
                            float: right; margin: 5px 0 0 10px;
                            i{ vertical-align: middle; font-size:14px;}
                        }
                    }
                }
            }
        }
    }
    .bts{
         padding:10px 10px 0;
         button{ height:45px; line-height:45px; font-size:15px; margin: 0 0 10px;}
    }
}

// 详情内容
.detailedContent{
    .detailsBox{
        background: #FFF; margin: 10px 0;
        h4{ height: 40px; line-height: 40px; padding: 0 10px;}
        .addBox{
            padding: 10px 15px;
            em{ float: left; width:90px; }
            .rightCon{ 
                overflow: hidden;
                .peolist{ 
                    margin: 0 0 5px;
                    span{ display: inline-block; background: #bdddff; color:#2d5580; padding: 5px 15px; margin:0 5px 5px 0; border-radius: 3px;}
                }
                p{ background: #f5f5f5; text-align: center; padding: 5px 0; color: #999; font-size: 12px; margin: 0 0 10px;}
                .appendPeo{  
                    background: #1bb1fb; height: 30px; line-height: 30px; padding: 0 8px; border-radius: 3px; display:inline-block; text-align: center; color: #FFF;
                    i{color:#FFF; font-size: 16px; vertical-align: middle; margin: -2px 5px 0 0;}
                }
                .duanxin{
                    margin: 0 0 0 5px;
                    .van-switch{vertical-align: middle; margin: -2px 0 0 5px;}
                }
            }
        }
    }
    .synopsis{
        h3{ padding: 10px; font-size:1.5rem;}
        ul{
            background: #FFF; padding: 5px 0;
            li{ 
                padding: 5px 0; min-height: 30px;
                em{ float: left; width: 6em; text-align: right; color: #999;}
                .rightCon{ overflow: hidden;}
                .rightConNoOver{
                    display: block; width: 100%;
                    p{ padding: 0 10px;}
                }
                .detailsState{
                     padding: 0 10px;
                     i{ font-size: 16px; vertical-align:middle; margin: -1px 5px 0 0;}
                }
            }
        }
        
    }
    .attachment{
        .attachmentList{
            ul{
                padding: 10px 0; white-space: nowrap; overflow: hidden; overflow-x: auto; font-size:0;
                li{ 
                    display: inline-block; width:50%; font-size:13px; box-sizing: border-box; padding: 0 5px;
                    .fileImg{ 
                        float: left; width: 45px; height: 45px; border-radius: 5px; margin:5px; line-height: 45px; text-align: center; background: #1bb1fb;
                        i{ color: #FFF; font-size: 2rem;}
                    }
                    .fileMessage{
                        overflow: hidden; position: relative; padding: 0 30px 0 0; max-height:45px;
                        h5{ padding: 8px 5px 5px 0; font-weight:normal; white-space: normal; font-size: 14px;}
                        dl{ 
                            position: absolute; top:10px; right: 0; width: 30px; left: auto; bottom: 0; text-align: center;
                            dt{
                                i{ font-size: 24px; color: #76b9ff;}
                            }
                            dd{ color: #999; font-size: 12px; margin: -5px 0 0;}
                        }

                    }
                }
            }
        }
    }

    // 回复内容
    .replyBox{
        .replyBoxCon{
            ul{
                padding:5px 0;
                li{
                    margin: 0 0 5px;
                    .peo{ float: left; width: 60px; margin: 0 10px 0 0; text-align: right; padding: 3px 0 0;}
                    .rightCon{
                         overflow: hidden;
                         .replyBoxMes{ 
                             background: #f5f5f5; border-radius:3px; margin: 0 10px 0 10px; position: relative;
                             &::after{ 
                                 position: absolute; content:""; width: 0; height:0;  top:5px; left:-16px;
                                 border:{ style:solid; width: 6px 8px; color: transparent #f5f5f5 transparent transparent;}
                                }
                                .replyBoxMes_1{ padding: 10px;}
                             .fileBar{
                                border-top:1px solid #dedede; padding: 10px;
                                 span{ float: left; vertical-align: middle; margin: -2px 5px 0 0;}
                                 p{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block;}
                             }
                            }
                    }
                    
                }
            }
        }
        .bts{ padding:10px 0;}
    }

    //送阅意见
    .opinionBox{
        .opinionBoxList{
            padding:5px 10px;
            li{
                .message{ width: 100%; padding: 10px; font-size: 15px; box-sizing: border-box; max-height:150px; overflow: hidden; overflow-y: auto; background: #F5F5F5;}
                dl{text-align: right; padding: 5px 0; border-bottom: 1px dashed #eaeaea; margin: 0 0 10px;}
            }
        }
    }

    .department{
        .departmentList{
            padding: 5px 10px;
            li{
                display: flex; line-height: 35px;
                span{
                    flex:1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                    &:last-child{text-align: right; flex:1.5;}
                    
                }
            }
        }
    }
    
}

// 请假详情
.leaveDetaileBox{
    margin: 0 0 10px; background: #FFF;
    h3{font-size:15px; color: #0084e4; padding: 10px;}
    ul{
        li{ 
            padding: 5px 0; min-height:30px;
            em{ float: left; width: 100px; padding: 0 10px; color: #666; box-sizing: border-box;}
            .rightCon{ 
                overflow: hidden;
                .choPeoList{
                    .peolist{
                        span{display: inline-block; padding: 5px 10px; margin: 0 5px 5px 0; background: #b5daf5; border-radius:3px; color: #025d9e;}
                    }
                    p{ display: block; background: #f5f5f5; color: #999; text-align: center; padding: 5px 0; margin: 0 0 5px;}
                    .appendPeo{ 
                        display: inline-block; background: #0084e4; padding: 5px 8px; border-radius:5px; color: #FFF;
                        i{vertical-align: middle; margin: -2px 5px 0 0;}
                    }
                    .duanxin{
                        padding: 0 5px;
                        .van-switch{vertical-align: middle; margin: -2px 0 0 5px}
                    }
                }
            }
        }
    }
    .flowBox{
        display: flex; width: 100%; padding: 10px 0 0;
        p{ 
            display: block; flex: 1; box-sizing:border-box; padding: 0 10px; position: relative;
            span{ display:block; position: relative;  padding: 5px 0;}
            em{ background: #F5f5f5; color: #777; font-size: 12px; padding: 8px;}
            &:nth-child(1){ 
                flex:1.5; text-align: center;
                span{ display:block; position: relative; background: #dceefb; padding: 5px; color:#228dda; margin: 0 0 5px;}
                &::after{ content:""; display: block; height:30px; width: 2px; background: #99bcd6; margin:0 auto;}
                &::before{ content:""; display: block; width: 0; height: 0; padding: 0; border: solid; border-color:#99bcd6 transparent transparent transparent; position: absolute; left: 0; top: 65px; right: 0; bottom:auto; margin: auto; border-width:8px 6px;}
            }
            &:nth-child(3){ flex:1.5; text-align: right;}
            &:last-child{
                &::after{ display: none;}
                &::before{ display: none;}
            }
        }
        &:last-child{
            p{
                &::after{ display: none;}
                &::before{ display: none;}
            }
        }
    }
    .ApprovalBox{
        .van-radio{ padding:5px 10px; float: left;}
    }
}

// 底部按钮
.selfBt{
    width: 95%; margin: 0 auto; display: flex; border-radius:3px; overflow: hidden;
    a{
        flex: 1; text-align: center; padding: 10px 0;
        &.doBt{ background: #228dda; color: #FFF;}
        &.upBt{flex:2; background:#07c160; color: #FFF;}
    }
}


// 登陆样式

.login{
    .loginM{
        padding: 0 10px;
        h3{ border-left: 2px solid #dedede;  font-size: 26px; font-weight: normal; padding: 0 10px; margin: 80px 30px;}
        form{
            padding: 0 30px;
        }
    }
    
}

// 头部样式
.gwTop{
     width: 100%; z-index: 1000; display: flex; background: #FFF;
    a{
        flex: 1; display: block; box-sizing: border-box; width: 100%; text-align: center; line-height:3rem; font-size:15px; text-decoration: none;
        &.on{ color: #0084e4; border-bottom:2px solid #0084e4;}
    }
}

// 表格通用样式
.tableStyle{
    border-collapse:collapse; border-radius: 5px; box-sizing: border-box;
    tr{
        th{ 
            border:1px solid #4c94e0; background: #52a5fd;height:2.5em; font-weight: normal; color:#FFF;
        }
        td{border:1px solid #c1dfff; text-align: center; padding: .6em 0;}
    }

}

// 弹层用样式
.layerBox{
    .layerBoxScroll{ position: absolute; left: 0; top:0; bottom: 50px; right: 0; overflow-y: auto;}
    .stateBar{
         text-align: center;padding: .5rem;
         span{ padding: 0 10px;}
    }
    .watchShowBox{
        span{ background:#1bb1fb; color: #FFF; margin:5px;height:30px; line-height: 30px; border-radius: 3px; display: inline-block; padding: 0 10px;}
    }
    .el-checkbox-group{
        label{ margin: 0 30px 10px 0;}
    }
    .peoList li{ 
        display:block; height: 35px; line-height: 35px; border-bottom: 1px dashed #dedede; color: #333;
        i{font-size:18px; float: right; margin:8px 0 0; display: none;}
        &.on{
            i{ color: #0084e4; display: block;}
        }
        
    }
}

.xuanfu{
    position: fixed; right: 10px; bottom:10px;
    span{ display: block; width: 35px; height: 35px; margin: 0 0 10px; text-align: center; line-height:40px; background: rgba(255,255,255,0.9); border-radius: 50%; font-size: 18px; color:$mainColor; box-shadow: 0 1px 2px #C5C5C5;}

}

.van-tabs__line{ background: $mainColor;}
.van-cell-group{ 
    margin: 0 0 10px;
}
// .van-tabs{ @extend .posA, .posCenter;}
// .van-tabs__content--animated{ position: absolute; left: 0; top: 44px; right: 0; bottom: 0; margin: auto;}